<template>
	<view class="fee">
		<view style="border-bottom:10rpx solid #f2f2f2;">
			<u-dropdown class="dis_inl_blo va_m" style="width:30%;">
				<u-dropdown-item v-model="value" title="取用方式" :options="options" @change="changeDrop"></u-dropdown-item>
			</u-dropdown>
			<u-search v-model="keyword" class="dis_inl_blo va_m u-margin-left-15" style="width:65%;" :show-action="true" action-text="搜索" :animation="true" @search="search" @custom="search"></u-search>
		</view>
		<view class="con-body">

			<view style="background-color: #FFFFFF;margin-top: 1px;">
				<u-tabs :list="tabs" bold='true' activeColor="#0B868E" :current="current" @change="changeTabs">
				</u-tabs>
			</view>

			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="uni-flex-center" v-for="(item, index) in List" v-key="index">
				<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
					<view class="user-list">
						<view class="title u-rela">
							<view class="u-abso pos_left">
								<text>{{value==0?'物业配送':'自提'}}</text>
							</view>
							<view class="u-abso pos_right" v-if="item.status==0">
								<text style="color:#007AFF;">{{item.status_label}}</text>
							</view>
							<view class="u-abso pos_right" v-if="item.status==1">
								<text style="color:#18B566;">{{item.status_label}}</text>
							</view>
							<view class="u-abso pos_right" v-if="item.status==2">
								<text style="color:#ff0000;">{{item.status_label}}</text>
							</view>
							<view class="u-abso pos_right" v-if="item.status==3">
								<text style="color:#ff5500;">{{item.status_label}}</text>
							</view>
							<view class="u-abso pos_right" v-if="item.status==-1">
								<text style="color:#666;">{{item.status_label}}</text>
							</view>
						</view>
						<!-- <u-line></u-line> -->
						<view class="u-padding-20">
							<view class="d_view u-margin-bottom-20">
								<text class="l_title">借用工具</text>
								<text class="d_content">{{item.tool}}</text>
							</view>

							<view class="d_view u-margin-bottom-20">
								<text class="l_title">联系人：{{item.name}}</text>
								<!-- <text class="d_content"></text> -->
								<u-icon style="" class="" color="#008b00" name="phone-fill" size="40" @click="makephone(item.tel)"></u-icon>
							</view>
							<view v-if="item.address" class="d_view u-margin-bottom-20">
								<text class="l_title">配送地址</text>
								<text class="d_content">{{item.address}}</text>
							</view>
							<view class="d_view">
								<text class="l_title">使用时间</text>
								<text class="d_content">{{item.time}}</text>
							</view>
						</view>
						<view class="u-padding-15 u-border-top u-text-right">
							<u-button class="u-margin-right-20" type="primary" shape="circle" size="mini" @click="shareDetail(item.id)">查看详情</u-button>
							<u-button v-if="item.status==0" class="u-margin-right-20" type="success" shape="circle" size="mini" @click="toshow(item.id)">审核通过</u-button>
							<u-button v-if="item.status==1" class="u-margin-right-20" type="success" shape="circle" size="mini" @click="toreturn(item.id)">确认归还</u-button>
							
							
						</view>
						<view style="clear: both;"></view>
					</view>
				</view>
			</view>

		</view>
		<u-modal v-model="show" :content="content" @confirm="confirm" showCancelButton=true></u-modal>
		<!-- 弹框提示 -->
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getAdjacentTools,
		examineAdjacentTools,
		searchAdjacentTools,
		returnAdjacentTools
	} from "@/service/shareService.js";
	export default {
		data() {
			return {
				current: 0,
				content:'',
				isreturn:1,
				id:0,
				value: 0,
				options: [{
					label:'物业配送',
					value:0
					},
					{
					label:'自提',
					value:1
					}],
				tabs: [
					{
						name: '待审核'
					},
					{
						name: '待使用'
					},
					{
						name: '借用中'
					},
					{
						name: '已归还'
					},
					{
						name: '过期/取消'
					}
				],
				List: [],
				status:0,
				page:2,
				limit:10,
				show: false,
				showEmpty: false,
				keyword:''
			}
		},
		onShow() {
			this.current=0;
			getAdjacentTools({
				status:this.status,
				type:this.value
			}).then(this.getAdjacentTools);
		},
		onReachBottom() {
			getAdjacentTools({
				status: this.status,
				type:this.value,
				limit:this.limit,
				page:this.page
			}).then(res=>{
				// console.log(res);
				if(res.code==200){
					if(res.result.length==0){
						this.$refs.uToast.show({
							type: 'error',
							title: '没有更多啦',
							icon:false
							// message: e.msg,
						})
					}else{
						let list = res.result;
						list.forEach((item) => {
							this.List.push(item);
						})
						this.page++;
					}
					
				}else {
					this.$refs.uToast.show({
						type: 'error',
						title: '没有更多啦',
						icon:false
					})
				}
			});
		},
		methods: {
			makephone:function(phone){
				uni.makePhoneCall({
					phoneNumber:phone,
					success(e) {
						console.log(e);
					}
				})
			},
			shareDetail:function(id){
				uni.navigateTo({
					url:'./convenienDetail?id='+id
				})
			},
			toshow:function(id){
				this.show=true;
				this.id=id;
				this.isreturn=1;
				this.content='该信息符合借用条件，予以审核通过'
			},
			toreturn:function(id){
				this.show=true;
				this.id=id;
				this.isreturn=2;
				this.content='检查物品正常，确认归还'
			},
			getAdjacentTools:function(e){
				if (e.code == 200) {
					this.List = e.result;
					if(e.result.length==0){
						this.showEmpty = true;
					}else{
						this.showEmpty = false;
					}
				} else {
					this.showEmpty = true;
					this.List = [];
				}
			},
			search:function(){
				searchAdjacentTools({
					keyword:this.keyword
				}).then(res=>{
					if(res.code==200){
						this.showEmpty = false;
						this.List=res.result
					}else{
						this.showEmpty = true;
						this.List=[]
					}
				})
			},
			changeDrop:function(e){
				this.current=0
				getAdjacentTools({
					status:0,
					type:this.value
				}).then(this.getAdjacentTools);
			},
			changeTabs(e) {
				let par;
				this.current = e;
				switch (this.current) {
					case 0:
						par = {
							status: 0,
							type:this.value
						};
						break;
					case 1:
						par = {
							status: 2,
							type:this.value
						};
						break;
					case 2:
						par = {
							status: 1,
							type:this.value
						};
						break;
					case 3:
						par = {
							status: 3,
							type:this.value
						};
						break;
					case 4:
						par = {
							status: -1,
							type:this.value
						};
						break;
					default:
						par = {
							status: 0,
							type:this.value
						};
				}
				getAdjacentTools(par).then(this.getAdjacentTools);
			},
			confirm:function(e){
				if(this.isreturn==1){
					examineAdjacentTools({
						id:this.id,
						status:1
					}).then(res=>{
						if(res.code==200){
							this.show=false;
							this.$refs.uToast.show({
								type: 'success',
								title: '操作成功',
								icon:false
								// message: e.msg,
							})
							getAdjacentTools({
								status:this.status,
								type:this.value
							}).then(this.getAdjacentTools);
						}else{
							this.show=false;
							this.$refs.uToast.show({
								type: 'error',
								title: res.msg,
								icon:false
								// message: e.msg,
							})
						}
					});
				}else if(this.isreturn==2){
					returnAdjacentTools({
						id:this.id
					}).then(res=>{
						if(res.code==200){
							this.show=false;
							this.$refs.uToast.show({
								type: 'success',
								title: '操作成功',
								icon:false
								// message: e.msg,
							})
							getAdjacentTools({
								status:this.status,
								type:this.value
							}).then(this.getAdjacentTools);
						}else{
							this.show=false;
							this.$refs.uToast.show({
								type: 'error',
								title: res.msg,
								icon:false
								// message: e.msg,
							})
						}
					});
				}
			}
		}
	}
</script>

<style>
	.u-empty.data-v-3d842a77 {
		margin-top:120rpx !important;
	}
	.l_title {
		color: #999;
		float: left;
	}

	.d_content {
		color: #666;
	}

	.d_view {
		font-size: 28rpx;
		color: #999;
		/* margin-top: 30rpx; */
		text-align: right;
	}
	.main-service {
		margin-top: 20upx;
		border-radius: 10upx;
		background: #ffffff;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
	}
	
	.main-service .title {
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
	}
	
	
	
</style>
